<template>

    <!-- 添加或修改对话框 -->
    <el-dialog v-model="open" :title="form.templateId?'修改数据':'新增数据'" width="500px" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="首件数量" label-width="80px" prop="maxPieceQuantity">
                <el-input v-model="form.maxPieceQuantity" placeholder="请输入首件数量" />
            </el-form-item>
            <el-form-item label="不超过首件数量的价格(元)" label-width="190px" prop="maxPieceQuantity">
                <el-input v-model="form.maxPieceQuantity" placeholder="请输入首件数量" />
            </el-form-item>
            <el-form-item label="不超过首件数量的价格(元)" label-width="190px" prop="maxPiecePrice">
                <el-input v-model="form.maxPiecePrice" placeholder="请输入首件数量的价格" />
            </el-form-item>
            <el-form-item label="续件数量" label-width="80px" prop="successor">
                <el-input v-model="form.successor" placeholder="请输入续件数量" />
            </el-form-item>
            <el-form-item label="续费价格(元)" label-width="110px" prop="renew">
                <el-input v-model="form.renew" placeholder="请输入续费价格" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
    import { reactive, ref, getCurrentInstance, ComponentInternalInstance } from 'vue'
    import { type FormRules, type FormInstance, ElMessage } from 'element-plus';

    // 引用后台的api
    import { getFreightTemplate, addFreightTemplate, updateFreightTemplate } from '@/api/app/store/freightTemplate';
    import { FormReq } from '@/types/store/freightTemplate';;

    // 获取当前vue3的页面this对象转换为proxy代理，查询 sys_dict_data表中的值
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    const open = ref(false);
    //得到数据表单form样式对象
    const formRef = ref<FormInstance>();

    //声明子组件的自定义事件 https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
    const emit = defineEmits(['refreshDataList'])

    // 定义表单对象
    const form = ref<FormReq>({
        templateId: undefined,
        maxPieceQuantity: 0,
        maxPiecePrice: 0,
        successor: 0,
        renew: 0,
    });


    // 表单验证
    const rules = reactive<FormRules>({
        maxPieceQuantity: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        maxPiecePrice: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        successor: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        renew: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
    });

    //对话框保存按钮
    const submitForm = () => {
        formRef.value.validate((valid : boolean) => {
            //验证不成功
            if (!valid) {
                return false
            }
            //修改
            if (form.value.templateId) {
                updateFreightTemplate(form.value).then(resp => {
                    ElMessage.success({
                        message: '修改成功',
                        duration: 500,
                        onClose: () => {
                            //关闭弹窗
                            open.value = false
                            //调用重新查询数据操作
                            emit('refreshDataList')
                        }
                    });

                })
            } else {
                //新增
                addFreightTemplate(form.value).then(resp => {
                    ElMessage.success({
                        message: '新增成功',
                        duration: 500,
                        onClose: () => {
                            //关闭弹窗
                            open.value = false
                            //调用重新查询数据操作
                            emit('refreshDataList')
                        }
                    });

                })
            }

        })

    };

    //对话框取消按钮
    const cancel = () => {
        open.value = false;
        resetForm();

    };


    // 重置表单
    const resetForm = () => {
        // 清空表单样式
        if (formRef.value) {
            formRef.value.resetFields();
        }
        // 重置值
        form.value = {
            maxPieceQuantity: 0,
            maxPiecePrice: 0,
            successor: 0,
            renew: 0,

        };
    };

    //判断如果是修改操作，就要查询数据库，还原数据,要暴露出去
    const init = (templateId ?: number) => {
        open.value = true
        // 重置表单数据
        resetForm();
        // templateId 存在则为修改
        if (templateId) {
            getFreightTemplate(templateId).then(resp => {

                form.value = resp.data;


            })
        }
    }

    //https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
    defineExpose({
        init
    })
</script>

<style>
</style>
